{% load static %}

{% include "analyse/header.html" %}
{% include "analyse/importCSS.html" %}

<script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/offline-exporting.js"></script>
<div class="container">

    <div class="col-md-12">
        <ul id="tab2" class="nav nav-pills">
            <li class="active"><a href="#tab2-item1" data-toggle="tab">年数量走势</a></li>
            <li><a href="#tab2-item2" data-toggle="tab">高产量作者</a></li>
            <li><a href="#tab2-item3" data-toggle="tab">高产量机构</a></li>
            <li><a href="#tab2-item4" data-toggle="tab">基金占比</a></li>
        </ul>
        <div class="tab-content" style="padding-top: 50px;padding-bottom: 100px;">
            <div class="tab-pane fade active in" id="tab2-item1">
                <div id="source_type" style="min-width:400px;height:400px"></div>
            </div>
            <div class="tab-pane fade" id="tab2-item2">
                <div id="top_authors" style="min-width:400px;height:400px"></div>
            </div>
            <div class="tab-pane fade" id="tab2-item3">
                <div id="top_schools" style="min-width:400px;height:400px"></div>
            </div>
            <div class="tab-pane fade" id="tab2-item4">
                <div id="top_funds" style="min-width:400px;height:400px"></div>
            </div>
        </div>
    </div>
</div>
<script>
    //这里是下载按钮的配置文件
    Highcharts.setOptions({
        lang: {
            contextButtonTitle: "图表导出菜单",
            downloadJPEG: "下载 JPEG 图片",
            downloadPDF: "下载 PDF 文件",
            downloadPNG: "下载 PNG 文件",
            downloadSVG: "下载 SVG 文件",
            printChart: "打印图表"
        }
    });
    var dafaultMenuItem = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;

    //时间关键词表
    $.getJSON('{% url "getYearToKeyword" %}', function (data) {
        console.log(data);
        // setTimeout(function () {
        $('.highcharts-contextbutton').click();
        // }, 200);

        chart = Highcharts.chart('source_type', {
            title: {
                text: '年论文发表趋势'
            },
            subtitle: {
                text: '数据来源: cnki'
            },
            xAxis: {

                type: 'category',
                title: {
                    text: '年'
                },
                labels: {
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: [{ // 第一个 Y 轴，放置在左边（默认在坐标）
                title: {
                    text: '当年发表论文数量'
                },
                // pointStart: 2005,
            }],
            series: [{
                data: data
            }],
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    // pointStart: 2005,
                    dataLabels: {
                        // 开启数据标签
                        enabled: true
                    }
                    ,
                }
            },
            exporting: {
                buttons: {
                    contextButton: {
                        // 自定义导出菜单项目及顺序
                        menuItems: [
                            dafaultMenuItem[0],
                            {
                                separator: true
                            },
                            dafaultMenuItem[3],
                            {
                                text: '下载 PDF 文件',
                                onclick: function () {
                                    this.exportChart({
                                        type: 'application/pdf'
                                    });
                                }
                            },

                            dafaultMenuItem[5],
                            dafaultMenuItem[1],
                            {
                                text: '跳转链接',
                                onclick: function () {
                                    window.location.href = 'https://www.hcharts.cn';
                                }
                            }
                        ]
                    }
                }
            }
            ,

        })

    });

    //作者关键词柱状图
    $.getJSON('{% url "getAuthorToKeyword" %}', function (data) {
        console.log(data);

        $('.highcharts-contextbutton').click();

        chart = Highcharts.chart('top_authors', {
            chart: {
                type: 'column'
            },
            title: {
                text: '作者发表论文数量排行'
            },
            subtitle: {
                text: '数据来源: cnki'
            },
            xAxis: {
                type: 'category',
                labels: {
                    rotation: -45,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }

            },
            yAxis: [{ // 第一个 Y 轴，放置在左边（默认在坐标）
                title: {
                    text: '发表论文数量'
                },
            }],
            series: [{
                data: data
            }],
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    dataLabels: {
                        // 开启数据标签
                        enabled: true
                    }
                    ,
                }
            },
            exporting: {
                buttons: {
                    contextButton: {
                        // 自定义导出菜单项目及顺序
                        menuItems: [
                            dafaultMenuItem[0],
                            {
                                separator: true
                            },
                            dafaultMenuItem[3],
                            {
                                text: '下载 PDF 文件',
                                onclick: function () {
                                    this.exportChart({
                                        type: 'application/pdf'
                                    });
                                }
                            },

                            dafaultMenuItem[5],
                            dafaultMenuItem[1],
                            {
                                text: '跳转链接',
                                onclick: function () {
                                    window.location.href = 'https://www.hcharts.cn';
                                }
                            }
                        ]
                    }
                }
            }
            ,

        })

    });
    $.getJSON('{% url "getSchoolToKeyword" %}', function (data) {
        console.log(data);

        $('.highcharts-contextbutton').click();

        chart = Highcharts.chart('top_schools', {
            chart: {
                type: 'column'
            },
            title: {
                text: '机构发表论文数量排行'
            },
            subtitle: {
                text: '数据来源: cnki'
            },
            xAxis: {
                type: 'category',
                labels: {
                    rotation: -45,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }

            },
            yAxis: [{ // 第一个 Y 轴，放置在左边（默认在坐标）
                title: {
                    text: '发表论文数量'
                },
            }],
            series: [{
                data: data
            }],
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    dataLabels: {
                        // 开启数据标签
                        enabled: true
                    }
                    ,
                }
            },
            exporting: {
                buttons: {
                    contextButton: {
                        // 自定义导出菜单项目及顺序
                        menuItems: [
                            dafaultMenuItem[0],
                            {
                                separator: true
                            },
                            dafaultMenuItem[3],
                            {
                                text: '下载 PDF 文件',
                                onclick: function () {
                                    this.exportChart({
                                        type: 'application/pdf'
                                    });
                                }
                            },

                            dafaultMenuItem[5],
                            dafaultMenuItem[1],
                            {
                                text: '跳转链接',
                                onclick: function () {
                                    window.location.href = 'https://www.hcharts.cn';
                                }
                            }
                        ]
                    }
                }
            }
            ,

        })

    });
    $.getJSON('{% url "getFundToKeyword" %}', function (data) {
        console.log(data);

        $('.highcharts-contextbutton').click();

        chart = Highcharts.chart('top_funds', {
            chart: {
                type: 'column'
            },
            title: {
                text: '基金发表论文数量排行'
            },
            subtitle: {
                text: '数据来源: cnki'
            },
            xAxis: {
                type: 'category',
                labels: {
                    rotation: -45,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }

            },
            yAxis: [{ // 第一个 Y 轴，放置在左边（默认在坐标）
                title: {
                    text: '发表论文数量'
                },
            }],
            series: [{
                data: data
            }],
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    dataLabels: {
                        // 开启数据标签
                        enabled: true
                    }
                    ,
                }
            },
            exporting: {
                buttons: {
                    contextButton: {
                        // 自定义导出菜单项目及顺序
                        menuItems: [
                            dafaultMenuItem[0],
                            {
                                separator: true
                            },
                            dafaultMenuItem[3],
                            {
                                text: '下载 PDF 文件',
                                onclick: function () {
                                    this.exportChart({
                                        type: 'application/pdf'
                                    });
                                }
                            },

                            dafaultMenuItem[5],
                            dafaultMenuItem[1],
                            {
                                text: '跳转链接',
                                onclick: function () {
                                    window.location.href = 'https://www.hcharts.cn';
                                }
                            }
                        ]
                    }
                }
            }
            ,

        })

    });

</script>
{% include "analyse/footer.html" %}
{% include "analyse/importJS.html" %}
